import React from 'react';
import './index.css';
import avatar from './img/02.png';

class CommentDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabs: [
        {
          id: 1,
          name: '热度',
          type: 'hot'
        },
        {
          id: 2,
          name: '时间',
          type: 'time'
        }
      ],
      active: 'hot',
      list: [
        {
          id: 1,
          author: '许巍',
          comment: '救赎之旅',
          time: new Date('2021-10-10 09:09:00'),
          attitude: 1
        },
        {
          id: 2,
          author: '周杰伦',
          comment: '哎哟，不错哦',
          time: new Date('2021-10-11 09:09:00'),
          attitude: 0
        },
        {
          id: 3,
          author: '五月天',
          comment: '不打扰，是我的温柔',
          time: new Date('2021-10-11 10:09:00'),
          attitude: -1
        }
      ]
    };
  }

  // 添加评论
  addComment = () => {
    // 获取文本框中的值
    const { value: comment } = this.commentInput;

    // 如果评论为空，则不做任何操作
    if (comment.trim() === '') {
      return;
    }

    // 构造新的评论对象
    const newComment = {
      id: this.state.list.length + 1,
      author: '匿名用户',
      comment: comment,
      time: new Date(),
      attitude: 0
    };

    // 将新的评论添加到列表中
    this.setState({
      list: [...this.state.list, newComment]
    });

    // 清空文本框的值
    this.commentInput.value = '';
  };

  // 删除评论
  deleteComment = (id) => {
    this.setState({
      list: this.state.list.filter((item) => item.id !== id)
    });
  };

  // 切换Tab
  changeTab = (type) => {
    this.setState({
      active: type
    });
  };

  render() {
    const sortedList = this.state.list.sort((a, b) => {
      if (this.state.active === 'hot') {
        return b.attitude - a.attitude;
      } else {
        return b.time - a.time;
      }
    });

    return (
      <div className="App">
        <div className="comment-container">
          <div className="comment-head">
            <span>{this.state.list.length} 评论</span>
          </div>
          <div className="tabs-order">
            <ul className="sort-container">
              {this.state.tabs.map((tab) => (
                <li
                  key={tab.id}
                  className={this.state.active === tab.type ? 'on' : ''}
                  onClick={() => this.changeTab(tab.type)}
                >
                  {tab.name}
                </li>
              ))}
            </ul>
          </div>
          <div className="comment-send">
            <div className="user-face">
              <img className="user-head" src={avatar} alt="" />
            </div>
            <div className="textarea-container">
              <textarea
                cols="80"
                rows="5"
                placeholder="发条友善的评论"
                className="ipt-txt"
                ref={(input) => {
                  this.commentInput = input;
                }}
              ></textarea>
              <button className="comment-submit" onClick={this.addComment}>
                发表评论
              </button>
            </div>
            <div className="comment-emoji">
              <i className="face"></i>
              <span className="text">表情</span>
            </div>
          </div>
          <div className="comment-list">
            {sortedList.map((item) => (
              <div className="list-item" key={item.id}>
                <div className="user-face">
                  <img className="user-head" src={avatar} alt="" />
                </div>
                <div className="comment">
                  <div className="user">{item.author}</div>
                  <p className="text">{item.comment}</p>
                  <div className="info">
                    <span className="time">{item.time.toLocaleString()}</span>
                    <span className={`like ${item.attitude === 1 ? 'liked' : ''}`}>
                      <i className="icon" />
                    </span>
                    <span className={`hate ${item.attitude === -1 ? 'hated' : ''}`}>
                      <i className="icon" />
                    </span>
                    <span className="reply btn-hover" onClick={() => this.deleteComment(item.id)}>
                      删除
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

export default CommentDemo;
